<template>
  <m-window-frame
    title="EWX集成"
    cancel-text="取 消"
    ok-text="下 发"
    :ok-loading="okLoading"
    :confirm-disabled="phaseStatus.confirmDisabled"
    class="v-vire-transfer"
    @ok="handleCancel(true)"
    @cancel="handleCancel(false)"
  >
    <div
      class="g-fd-c"
      style="height: 100%"
    >
      <div class="_attr-tip g-fd-c">
        <img
          src="statics/arch/icon/VIRE_EWX.png"
          height="87"
          style="object-fit: cover"
        />
      </div>
      <el-container class="g-flex-1">
        <el-main
          class="g-fd-c _main"
          style="justify-content: space-evenly"
        >
          <el-row>
            <el-col
              :span="14"
              :offset="5"
            >
              <el-input
                v-model="host"
                placeholder="请选择主机名"
              >
                <template #prefix>
                  <img src="/statics/icons/login/host.svg" />
                </template>
              </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="14"
              :offset="5"
            >
              <el-input
                v-model="port"
                placeholder="请选择端口号"
              >
                <template #prefix>
                  <img src="statics/icons/login/port.svg" />
                </template>
              </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="14"
              :offset="5"
            >
              <el-button
                size="default"
                :type="phaseStatus.type"
                :loading="phaseStatus.loading"
                style="width: 100%"
                @click="handleConnect"
              >
                {{ phaseStatus.label }}
              </el-button>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </m-window-frame>
</template>

<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { ref, onBeforeMount, watch, computed } from "vue";
import { projectService } from "@/mdesign-lib/mdesign-app.umd.js";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import { StorageKey } from "@/util/Storage";

const status: Record<string, { label: string; type: "primary" | "danger" | "success"; loading: boolean; confirmDisabled: boolean }> = {
  beforeConnect: { label: "连接", type: "primary", loading: false, confirmDisabled: true },
  connecting: { label: "连接中...", type: "primary", loading: true, confirmDisabled: true },
  failed: { label: "连接失败，点击重试", type: "danger", loading: false, confirmDisabled: true },
  success: { label: "连接成功", type: "success", loading: false, confirmDisabled: false }
};

const host = ref("127.0.0.1");
const port = ref("50001");
const phase = ref<keyof typeof status>("beforeConnect");
const phaseStatus = computed(() => status[phase.value]);
const okLoading = ref(false);

watch([host, port], () => (phase.value = "beforeConnect"));

function handleCancel(res: boolean) {
  ipcWindowUtil.closeWindow({ success: res });
}

function handleConnect() {
  phase.value = "connecting";
  projectService
    .queryEWXConnectionState(host.value, port.value)
    .then(res => {
      if (res) {
        phase.value = "success";
        app.storage.set(StorageKey.EWXHost, host.value);
        app.storage.set(StorageKey.EWXPort, port.value);
      } else {
        phase.value = "failed";
      }
    })
    .catch(() => (phase.value = "failed"));
}

onBeforeMount(() => {
  const _host = app.storage.get(StorageKey.EWXHost);
  const _port = app.storage.get(StorageKey.EWXPort);
  _host && (host.value = _host);
  _port && (port.value = _port);
  handleConnect();
});
</script>

<style lang="scss">
.v-vire-transfer {
  ._attr-tip {
    height: 89px;
  }
  .el-main {
    padding: 0;
    padding-top: 40px;
    .el-row {
      margin-bottom: 20px;
      &:last-of-type {
        margin-top: 30px;
      }
      button {
        height: 32px;
        border-radius: 0;
      }
      .el-input__wrapper {
        padding-left: 8px;
        .el-input__prefix-inner {
          img {
            margin-right: 4px;
          }
        }
      }
    }
    input {
      height: 26px;
    }
  }
}
</style>
